import React from "react";
import {connect} from "react-redux";
import {fetchNews,fetchComments} from "../actions/comments";
import {formatDateTime} from '../date';
import { Form } from 'element-react';

class Comments extends React.Component{
    componentDidMount(){
        this.props.fetchNews(this.props.params.id);
        this.props.fetchComments(this.props.params.id)
    }

    handleSubmit(e) {
        e.preventDefault();
        
        this.refs.form.validate((valid) => {
            if (valid) {
            alert('submit!');
            } else {
            console.log('error submit!!');
            return false;
            }
        });
    }
    handleReset(e) {
        e.preventDefault();
        
        this.refs.form.resetFields();
    }
    onChange(key, value) {
        this.setState({
            form: Object.assign({}, this.state.form, { [key]: value })
        });
    }
      
    
    render(){
        var news = this.props.news.rows;
        var comments = this.props.comments.rows;
        var newsRender=[];
        var commentsRender=[];
        var count;
        if(news){
            var news = news[0];
            var imgPath = "../img/img3.png";
            if(news.thumb){
                imgPath="http://localhost:3000/"+news.thumb[0].filename;
            }
            newsRender.push(
                <div key={news._id}>
                    <h3>{news.title}</h3>
                    <p className="time"><span className="bj">编辑：{news.author}</span>时间：{formatDateTime(news.data)}</p>
                    <p className="img"><img src={imgPath}/></p>
                    <p className="newsCom" dangerouslySetInnerHTML={{__html: news.content}}></p>
                </div>
            )
        }
        if(comments){
            var len=comments.length;
            count=len;
            console.log(comments)
            for(var i=0;i<len;i++){
                commentsRender.push(
                    <div key={i} className="comment">
                        <p dangerouslySetInnerHTML={{__html: comments[i].commit}}></p>
                        <p>
                            <e className="right">日期：{formatDateTime(comments[i].data)}</e>
                            <span className="right">昵称：{comments[i].name}</span>
                        </p>
                        
                        
                    </div>
                )
            }
        }

        return (
            <div className="autoAll">
                <div id="newsDetails">
                    {newsRender}
                    <div>
                        <h4>最新评论:{count}条</h4>
                        {commentsRender}
                    </div>
                </div>
                {/*<Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100" className="demo-ruleForm">
                    <Form.Item label="密码" prop="pass">
                    <Input type="password" value={this.state.form.pass} onChange={this.onChange.bind(this, 'pass')} autoComplete="off" />
                    </Form.Item>
                    <Form.Item label="确认密码" prop="checkPass">
                    <Input type="password" value={this.state.form.checkPass} onChange={this.onChange.bind(this, 'checkPass')} autoComplete="off" />
                    </Form.Item>
                    <Form.Item>
                    <Button type="primary" onClick={this.handleSubmit.bind(this)}>提交</Button>
                    <Button onClick={this.handleReset.bind(this)}>重置</Button>
                    </Form.Item>
        </Form>*/}
          
            </div>
        )
    }
} 

const mapStateToProps = (state) => {
    return {
        news:state.comments.news,
        comments:state.comments.comments,
    }
}

const NewComments = connect(
    mapStateToProps,
    {fetchNews,fetchComments},

)(Comments);

module.exports = NewComments;